<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>02-08</title>
<style>
    #list  { width: 400px; border:1px solid black; border-collapse:collapse; }
    #list td, #list th { border:1px solid black;  text-align:center; }
    #list > thead > tr { color:yellow; background-color: purple; }
</style>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="exmaple">
	<table id="list">
		<thead>
			<tr>
                <th>번호</th><th>이름</th><th>전화번호</th><th>주소</th>
            </tr>
		</thead>
		<tbody id="contacts">
            <tr v-for="(contact, index) in contacts">
                <td>{{index+1}}</td>
                <td>{{contact.name}}</td>
                <td>{{contact.tel}}</td>
                <td>{{contact.address}}</td>
            </tr>
		</tbody>
	</table>
    </div>
    <script type="text/javascript">
    var model = {
        "pageno": 1,
        "pagesize": 10,
        "totalcount": 100,
        "contacts": [
            { "no": 100,"name": "설현", "tel": "010-3456-8299", "address": "서울" },
            { "no": 99, "name": "혜리", "tel": "010-3456-8298", "address": "서울" },
            { "no": 98, "name": "하니", "tel": "010-3456-8297", "address": "경기" },
            { "no": 97, "name": "성소", "tel": "010-3456-8296", "address": "제주" },
            { "no": 96, "name": "지아", "tel": "010-3456-8295", "address": "서울" },
            { "no": 95, "name": "정연", "tel": "010-3456-8294", "address": "강원" },
            { "no": 94, "name": "쯔위", "tel": "010-3456-8293", "address": "경기" },
            { "no": 93, "name": "사나", "tel": "010-3456-8292", "address": "서울" },
            { "no": 92, "name": "모모", "tel": "010-3456-8291", "address": "충남" },
            { "no": 91, "name": "소진", "tel": "010-3456-8290", "address": "서울" }
        ]
    }

    var list = new Vue({
        el : "#exmaple",
        data : model
    });
    </script>
</body>
</html>